<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .macy-container{
         width: 750px;
    }
    li{
   width: 50%;
  }
  li img {
      width: 100%;
  }
</style>
<body>
    <ul class="macy-container">
        <li>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F210103%2F1-210103211Z8.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662082032&t=952070f76fa7a763622ebd62cf1b04a9"/>
          <p>瀑布流</p>
        </li>
        <li>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662082032&t=e6ba198132e85a75049265cb68a300fd"/>
          <p>瀑布流</p>
        </li>
        <li>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.redocn.com%2Fsheying%2F20150414%2Fxiyangxiadedahaimeijing_4161285.jpg&refer=http%3A%2F%2Fimg.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662082032&t=9b77006db1f3c779b865b02ffe465e8f"/>
          <p>瀑布流</p>
        </li>
          <li>
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F21031FKU44S6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662082258&t=d07f4826d514236c0ae3466bfb03a059"/>
          <p>瀑布流</p>
        </li>
        <li>
          <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg"/>
          <p>瀑布流</p>
        </li>
        <li>
          <img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1078861629,3747050294&fm=26&gp=0.jpg"/>
          <p>瀑布流</p>
        </li>
     </ul>

    <script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
    <script>
      const  getMacy = () => {
    // if (this.state.masonry) {
    //   this.state.masonry.reInit()
    // } else {
      let masonry = new Macy({
        container: '.macy-container', // 图像列表容器
        trueOrder: false,
        waitForImages: false,
        useOwnImageLoader: false,
        debug: true,
        margin: { x: 13, y: 4 },    // 设计列与列的间距
        columns: 2,    // 设置列数
      })
    
    }
  
  getMacy()
    </script>
</body>
</html>